<template>
    <div class="app-container">
      <h2 style="text-align: center">分布新课程</h2>
      <el-steps
        :active="3"
        align-center
        style="margin-bottom: 40px"
        process-status="wait"
      >
        <el-step title="填写课程基本信息"></el-step>
        <el-step title="创造课程大纲"></el-step>
        <el-step title="发布课程"></el-step>
      </el-steps>
      <div class="info">
        <img :src="coursePublishInfo.cover" :alt="coursePublishInfo.title" />
        <div class="main">
          <h2>{{ coursePublishInfo.title }}</h2>
          <p>共{{ coursePublishInfo.lessonNum }}课时</p>
          <p>
            所属分类:{{ coursePublishInfo.subjectParentTitle }}——{{
              coursePublishInfo.subjectTitle
            }}
          </p>
          <p>课程讲师:{{ coursePublishInfo.teacherName }}</p>
          <h3>￥{{ coursePublishInfo.price }}</h3>
        </div>
      </div>
      <el-button type="default" @click="privious()">返回修改</el-button>
      <el-button type="primary" @click="publish()">发布课程</el-button>
    </div>
  </template>
  <script>
  import courseApi from "@/api/course";
  export default {
    data() {
      return {
        courseId: "",
        coursePublishInfo: {}, //课程发布信息
      };
    },
    methods: {
      // 上一步
      privious() {
        this.$router.push({ path: `/course/chapter/${this.courseId}` });
      },
      // 发布课程
      publish() {
        //根据课程id调用API当前课程状态修改为已发布
        courseApi.publishCourse(this.courseId).then((res) => {
          //发布完后跳转至列表页面
          //提示成功信息
          this.$message({
            type: "success",
            message: "发布成功",
          });
          this.$router.push({ path: "/course/list" });
        });
      },
      init() {
        //根据路由参数.获取课程id
        if (this.$route.params && this.$route.params.id) {
          this.courseId = this.$route.params.id;
          //根据课程id通过api获取发布信息
          courseApi.getPbulishInfoById(this.courseId).then((res) => {
            this.coursePublishInfo = res.data;
          });
        }
      },
    },
    created() {
      //初始化页面信息
      this.init();
    },
  };
  </script>
  <style scoped>
  .info {
    background-color: #f5f5f5;
    padding: 20px;
    border: 1px dotted #ddd;
    height: 400px;
  }
  .info img {
    width: 400px;
    float: left;
    margin-right: 50px;
  }
  
  .info.main {
    float: left;
    margin-left: 300px;
  }
  .info.main h2 {
    font-weight: 400;
  }
  .info.main p {
    line-height: 50px;
  }
  </style>